<template>
	<div class="container">
		<view class="total flex-end">
			<!-- <text>
				共计
				<text class="blue">{{ totalNum }}</text>
				台
			</text> -->
			<!-- <view class="type" @click.stop="changeEChartType">
				筛选
				<text class="iconfont icon-xiajiantou"></text>
			</view> -->
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="商户："
					:value="item.merchName+'('+item.merchNo+')'" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="订单号："
					:value="item.orderNo" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="分润金额："
					:value="item.shareAmount" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="新增时间："
					:value="item.createTime" />
			</view>
		</view>
		<u-popup v-model="filterPopup" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="商户编号：" v-model="query.merchNo" :label-width="170" input-align="left"
						placeholder="请输入商户编号"></u-field>
					<u-field label="商户名称：" v-model="query.merchName" :label-width="170" input-align="left"
						placeholder="请输入商户名称"></u-field>
					<u-field label="订单号：" v-model="query.orderNo" :label-width="170" input-align="left"
						placeholder="请输入订单号"></u-field>
					<u-field readonly label="产品政策：" :value="query.policyName" input-align="left" :label-width="170"
						placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
					<view class="duble-input flex-space-between">
						<text class="text">新增日期</text>
						<u-field label="" v-model="query.startDate" readonly :label-width="0" :border-bottom="false"
							input-align="center" placeholder="请选择" @click.stop="chooseTime('start')"></u-field>
						-
						<u-field readonly label="" :value="query.endDate" :border-bottom="false" input-align="center"
							:label-width="0" placeholder="请选择" @click="chooseTime('end')" />
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn"
							@click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button>
					</div>
				</div>
			</div>
		</u-popup>
		<u-picker title="政策筛选" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onPolicyConfirm" @cancel="showPicker = false" />
		<u-picker mode="time" v-model="timePicker" :default-time="defaultTime" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
		<uni-load-more :status="loadMore"></uni-load-more>
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentMonthLast,
		getMonthFirst,
		getMonthLast
	} from '_c/utils/date';
	import loadMoreData from '@/mixins/loadmore';
	import {
		listData
	} from '_a/price-property-detail';
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				list: [],
				query: {
					startDate: '',
					endDate: ''
					// timeDate: getNowMonthNoDate(new Date()),
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timePicker: false,
				filterPopup: false,
				showPicker: false,
				totalNum: 0, // 总数量
				chooseType: 'start', //选择时间类型
				defaultTime: '',
				type: 'merch' //preMerch : 平行代理商户 :  ,merch 普通商户
			};
		},
		filters: {
			percent(v) {
				return (v * 100) + '%'
			}
		},
		onNavigationBarButtonTap(e) {
			this.changeEChartType()
			// this.$nav.push({
			// 	path: '/pages/home/price-property/add?type=add'
			// });
		},
		onLoad(o) {
			this.type = o.type || 'merch';
			// this.navIndex = o.type || 0;
			// this.query.policyCode = o.policyCode;
			// let item = this.policyList.find((item) => item.policyCode == o.policyCode);
			// if (item) {
			//   this.query.policyName = item.policyName;
			// }
			switch (this.type) {
				case 'pre':
					uni.setNavigationBarTitle({
						title: '平行代理商户信息查询'
					});
					break;
				default:
					break;
			}
			this.getList();
			uni.$on('update', (data) => {
				this.init()
			})
		},
		onUnload() {
			uni.$off('update', (data) => {})
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			},
			totalTypeList() {
				return this.$store.getters.totalTypeList || [];
			},
		},
		methods: {

			chooseTime(type) {
				this.timePicker = true;
				this.chooseType = type;
				if (type == 'start') {
					this.defaultTime = this.query.startDate;
				} else {
					this.defaultTime = this.query.entDate;
				}
			},
			toDetail(item) {
				this.$storage.setStore('propertyDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/price-property-detail/detail'
				});
			},
			onPolicyConfirm(e) {
				console.log(e);
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.refreshLoad();
				});
			},
			resetHandle() {
				this.typename = '全部';
				this.query = {
					pageNum: 1,
					pageSize: 20
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterPopup = false;
			},
			pickerConfirmHandle(item) {
				if (this.chooseType == 'start') {
					this.query.startDate = `${item.year}-${item.month}-${item.day}`;
				} else {
					this.query.endDate = `${item.year}-${item.month}-${item.day}`;
				}
				this.timePicker = false;
			},
			changeEChartType() {
				this.filterPopup = true;
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.query
				};
				listData(params).then(res => {

					var list = res.rows.map(item => {
						// console.log(item)
						let totalList = item.totalType.split(',')
						let nameStr = []
						totalList.map(total => {
							let index = this.totalTypeList.findIndex(itemC => itemC.dictValue ==
								total)
							nameStr.push(this.totalTypeList[index].dictLabel)
						})

						item.totalTypeName = nameStr.join(',')
						item.percent *= 100;

						return item
					});
					this.totalNum = res.total;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});

			},
			reachBottomCallBack() {
				this.getList();
			}
		}
	};
</script>
<style scoped lang="scss">
	.container {
		padding: R(25);
	}

	.list {
		background: #fff;
		border-radius: R(10);

		.filter {
			padding: R(20);
			font-size: R(24px);
			font-weight: 400;
			color: #666666;
			margin-bottom: R(20);

			.time-box {
				font-size: R(26);
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}

	.total {
		font-size: R(24);
		font-weight: 400;
		color: #737373;
		margin-bottom: R(20);

		.blue {
			color: #4286f5;
		}
	}

	.item {
		margin: R(25) R(0);
		padding: R(14) R(28) R(24);
		border-bottom: 1px solid #eee;

		.title {
			font-size: R(30);
			font-weight: bold;
			color: #1a1a1a;

			/deep/.u-cell__value {
				color: #1a1a1a;
			}
		}

		/deep/.u-cell {
			padding: R(4) R(10);

			.u-cell__value {
				text-align: left;
			}
		}
	}

	.filter-body {
		padding: R(30);

		.f-title {
			font-size: R(30);
			text-align: center;
			font-weight: 400;
			color: #999;
		}
	}

	.filter-content {
		margin-bottom: R(30);

		.duble-input {
			border-bottom: 1px solid #eee;

			.text {
				width: R(140);
				white-space: nowrap;
				padding: 0 R(28);
			}
		}
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}

	.icon-xiajiantou {
		font-size: R(24);
		margin-left: R(14);
	}
</style>